.venus-menu {
margin: 30px 0 10px
}
.venus-menu {
margin: 0;
padding: 0;
position: relative;
list-style: none;
background: #fff;
}
.venus-menu li {
display: inline-block;
margin: 0;
padding: 0;
float: left;
line-height: 20px;
position: relative
}
.venus-menu > li > a {
padding: 18px;
font-size: 16px;
color: #777;
text-decoration: none;
display: block;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.venus-menu li:hover > a, .venus-menu li.active a {
background: #134681;
color: #fff
}
.venus-menu > li > a i {
color: #bababa
}
.venus-menu > li:hover > a i, .venus-menu li.active a i {
color: #fff
}
.venus-menu ul, .venus-menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99;
width: 140px
}
.venus-menu ul {
top: 56px;
left: 0;
padding-top: 10px;
width: max-content;
/*min-width: 100%;*/
}
.venus-menu > li > ul > li:first-child a:before {
content: '';
position: absolute;
bottom: 48px;
left: 45%;
margin-left: -28px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #134681;
}
.venus-menu > li > ul > li ul li:first-child a:before {
content: '';
position: absolute;
bottom: 16px;
left: 45%;
margin-left: -71px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid #134681;
border-bottom: 8px solid transparent
}
.venus-menu ul li ul {
top: 0;
left: 100%;
padding-left: 10px
}
.venus-menu ul li {
clear: both;
width: 100%;
border: none
}
.venus-menu ul li a {
padding: 14px 20px;
width: 100%;
color: #fff;
font-size: 14px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
background: #134681;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear
}
.venus-menu ul li:hover > a {
background-color: #1f80ed
}
.venus-menu > li > ul > li:first-child:hover a:before {
border-bottom-color: #1f80ed
}
.venus-menu > li > ul > li ul li:first-child:hover a:before {
border-right-color: #1f80ed
}
.venus-menu > li .indicator {
position: absolute;
color: #bababa;
top: 19px;
right: 8px;
font-size: 20px;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear
}
.venus-menu > li:hover > .indicator {
color: #fff
}
.venus-menu ul > li .indicator {
top: 14px;
right: 8px;
color: #fff
}
.venus-menu i {
line-height: 20px !important;
margin-right: 6px;
font-size: 20px;
float: left
}
.venus-menu > li.showhide {
display: none;
width: 100%;
height: 46px;
cursor: pointer;
color: #777;
border-bottom: solid 1px rgba(0, 0, 0, .1);
background: #fff
}
.venus-menu > li.showhide span.title {
margin: 13px 0 0 20px;
float: left
}
.venus-menu > li.showhide span.icon {
margin: 16px 20px;
float: right
}
.venus-menu > li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.venus-menu li.search {
float: right
}
.venus-menu li.search form {
margin: 13px 20px 0 0
}
.venus-menu li.search form input.search {
height: 26px;
float: right;
padding-left: 5px;
padding-right: 5px;
color: #777;
outline: none;
border: solid 1px #dedede;
-o-transition: border .3s linear;
-moz-transition: border .3s linear;
-webkit-transition: border .3s linear;
transition: border .3s linear
}
.venus-menu li.search form input.search:focus {
border-color: #134681
}
.zoom-out {
-webkit-animation: zoomOut 600ms ease both;
-moz-animation: zoomOut 600ms ease both;
-o-animation: zoomOut 600ms ease both;
animation: zoomOut 600ms ease both
}
@-webkit-keyframes zoomOut {
0% {
-webkit-transform: scale(.6)
}
100% {
-webkit-transform: scale(1)
}
}
@-moz-keyframes zoomOut {
0% {
-moz-transform: scale(.6)
}
100% {
-moz-transform: scale(1)
}
}
@-o-keyframes zoomOut {
0% {
-o-transform: scale(.6)
}
100% {
-o-transform: scale(1)
}
}
@keyframes zoomOut {
0% {
transform: scale(.6)
}
100% {
transform: scale(1)
}
}
@media only screen and (max-width: 1440px) {
.venus-menu ul {
top: 40px;
}
}
@media only screen and (max-width: 1600px) {
.venus-menu > li > a{
padding: 10px;
}
}
@media only screen and (max-width: 768px) {
.venus-menu li {
display: block;
width: 100%
}
.venus-menu > li > a {
padding: 13px 0 14px 20px
}
.venus-menu > li.brand {
display: none !important
}
.venus-menu a {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.venus-menu ul, .venus-menu ul li ul {
width: 100%;
padding: 0;
left: 0;
border: none;
position: static;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.venus-menu > li > ul > li:first-child a:before, .venus-menu > li > ul > li ul li:first-child a:before {
border: none
}
.venus-menu ul li {
border-left: none;
border-right: none
}
.venus-menu ul li a {
padding-top: 10px;
padding-bottom: 10px
}
.venus-menu ul > li > a {
padding-left: 40px !important
}
.venus-menu > li .indicator {
top: 14px;
right: 20px;
font-size: 20px
}
.venus-menu ul > li .indicator {
top: 10px;
right: 20px
}
.venus-menu li.search form {
margin: 12px 18px 0
}
.venus-menu li.search form input.search {
width: 100%;
margin-bottom: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.venus-menu > li > ul > li > a {
padding-left: 40px !important
}
.venus-menu > li > ul > li > ul > li > a {
padding-left: 60px !important
}
.venus-menu > li > ul > li > ul > li > ul > li > a {
padding-left: 80px !important
}
}